<template>
  <!-- <a-scrollbar> -->
    <a-collapse v-model:activeKey="expand">
      <a-collapse-panel key="base-setting">
        <template #header>
          <div class="collapse-title">
            <s-v-g-icon style="width: 1em; height: 1em" name="Setting" />
            <span style="margin-left: 6px">基本设置</span>
          </div>
        </template>
        <basic-setting></basic-setting>
      </a-collapse-panel>
      <a-collapse-panel key="task-listener" v-show="bpmnSelectedElem?.type?.endsWith('UserTask')">
        <template #header>
          <div class="collapse-title">
            <s-v-g-icon style="width: 1em; height: 1em" name="TaskListening" />
            <span style="margin-left: 6px">任务监听</span>
          </div>
        </template>
        <div style="width: 100%; height: 100%; position: relative;">
          <task-listener/>
          <div id="task-listener-panel"></div>
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="execution-listener" v-show="bpmnSelectedElem?.type?.endsWith('UserTask') || bpmnSelectedElem?.type?.endsWith('SequenceFlow')">
        <template #header>
          <div class="collapse-title">
            <s-v-g-icon style="width: 1em; height: 1em" name="Notification" />
            <span style="margin-left: 6px">执行监听</span>
          </div>
        </template>
        <div style="width: 100%; height: 100%; position: relative;">
          <execution-listener/>
          <div id="execution-listener-panel"></div>
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="flow-condition" v-show="showConditionSeqFlow">
        <template #header>
          <div class="collapse-title">
            <s-v-g-icon style="width: 1em; height: 1em" name="Branch" />
            <span style="margin-left: 6px">流转条件</span>
          </div>
        </template>
        <seq-flow-config/>
      </a-collapse-panel>
      <a-collapse-panel key="owner" v-show="['bpmn:UserTask'].includes(bpmnSelectedElem?.type)">
        <template #header>
          <div class="collapse-title">
            <s-v-g-icon style="width: 1em; height: 1em" name="User" />
            <span style="margin-left: 6px">审核者</span>
          </div>
        </template>
        <approver-config/>
      </a-collapse-panel>
      <a-collapse-panel key="page" v-show="showPageConfig">
        <template #header>
          <div class="collapse-title">
            <s-v-g-icon style="width: 1em; height: 1em" name="Page" />
            <span style="margin-left: 6px">表单绑定</span>
          </div>
        </template>
        <page-config/>
      </a-collapse-panel>
    </a-collapse>
    <a-modal
      v-model:open="executionDialogInfo.visible"
      :title="executionDialogInfo.title"
      :footer="null"
      :maskClosable="false"
      :keyboard="false"
      @cancel="executionDialogInfo.visible = false"
    >
      <a-form :model="executionDialogInfo.formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="事件类型" required>
          <a-select v-model:value="executionDialogInfo.formData.event" style="width: 100%">
            <a-select-option value="start">开始</a-select-option>
            <a-select-option value="end">结束</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="监听器类型" required>
          <a-select v-model:value="executionDialogInfo.formData.type" style="width: 100%">
            <a-select-option value="class">Java类</a-select-option>
            <a-select-option value="expression">表达式</a-select-option>
            <a-select-option value="delegateExpression">代理表达式</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-show="!!valLabel" :label="valLabel" required>
          <a-input v-model:value="executionDialogInfo.formData.value" />
        </a-form-item>
      </a-form>
      <a-descriptions
        :column="3"
        bordered
        style="margin-top: 10px"
      >
        <template #title>
          <div style="display: flex; align-items: center">
            <s-v-g-icon style="width: 16px; height: 16px" name="TextField" />
            <span style="margin-left: 6px">字段注入</span>
          </div>
        </template>
        <template #extra>
          <a-button :icon="plusIcon" circle @click="addField" />
        </template>

        <template v-for="item in executionDialogInfo.formData.fields">
          <a-descriptions-item label="名称" v-text="item.name" />
          <a-descriptions-item label="类型" v-text="item.type" />
          <a-descriptions-item label="值" v-text="item.value" />
        </template>
      </a-descriptions>
    </a-modal>
    <a-modal
      v-model:open="fieldDialogInfo.visible"
      :title="fieldDialogInfo.title"
      :footer="null"
      :maskClosable="false"
      :keyboard="false"
      @cancel="fieldDialogInfo.visible = false"
    >
      <a-form :model="fieldDialogInfo.formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="字段名称" required>
          <a-input v-model:value="fieldDialogInfo.formData.name" />
        </a-form-item>
        <a-form-item label="字段类型" required>
          <a-select v-model:value="fieldDialogInfo.formData.type" style="width: 100%">
            <a-select-option value="string">字符串</a-select-option>
            <a-select-option value="expression">表达式</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="值" required>
          <a-input v-model:value="fieldDialogInfo.formData.value" />
        </a-form-item>
      </a-form>
    </a-modal>
  <!-- </a-scrollbar> -->
</template>

<script setup>
import { computed, onUnmounted, provide, ref, toRaw } from "vue"
import ExecutionListener from "/@/components/bpmn/form/ExecutionListener.vue"
import TaskListener from "/@/components/bpmn/form/TaskListener.vue"
import SVGIcon from "/@/components/common/SVGIcon.vue"
import { propertyPanelOpenedKey } from "/@/config/app.keys"
import SeqFlowConfig from "/@/components/bpmn/form/SeqFlowConfig.vue"
import PageConfig from "/@/components/bpmn/form/PageConfig.vue"
import BasicSetting from "/@/components/bpmn/form/BasicSetting.vue"
import ApproverConfig from "/@/components/bpmn/form/ApproverConfig.vue"
import { useIcon } from "/@/components/common/util"
import emitter from '/@/event/mitt'
import { useBpmnModeler, useBpmnSelectedElem } from "/@/config/app.hooks"

const plusIcon = useIcon('Plus')

const expand = ref("base-setting")
function open(key) {
  if (expand.value === 'page' && key === 'owner') {
    return
  }
  expand.value = key
}

provide(propertyPanelOpenedKey, expand)

const bpmnSelectedElem = useBpmnSelectedElem()
const bpmnModeler = useBpmnModeler()

const showConditionSeqFlow = computed(() => {
  const selectedElem = toRaw(bpmnSelectedElem.value)
  if (selectedElem?.type !== 'bpmn:SequenceFlow') {
    return false
  }
  const bo = selectedElem?.businessObject
  if (bo?.sourceRef?.$type === 'bpmn:ExclusiveGateway') {
    return true
  }

  return !!bo?.conditionExpression
})

const showPageConfig = computed(() => {
  const selectedElem = toRaw(bpmnSelectedElem.value)
  if (!selectedElem) {
    return false
  }
  if (['bpmn:UserTask', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(selectedElem?.type)) {
    return true
  }
  const bo = selectedElem?.businessObject
  return bo?.sourceRef?.$type === 'bpmn:UserTask' && !!bo?.conditionExpression
})

const valLabelMap = {
  class: 'Java类',
  expression: '表达式',
  delegateExpression: '代理表达式'
}

const fieldDialogInfo = ref({
  visible: false,
  title: '',
  formData: {
    name: '',
    type: undefined,
    value: ''
  }
})

const valLabel = computed(() => valLabelMap[executionDialogInfo.value?.formData?.type])
const executionDialogInfo = ref({
  visible: false,
  title: '',
  formData: {
    event: undefined,
    type: undefined,
    value: '',
    fields: []
  }
})

function addField() {
  fieldDialogInfo.value.title = '新增字段'
  fieldDialogInfo.value.visible = true
}

function addExecutionListener() {
  executionDialogInfo.value.title = '新增执行监听器'
  executionDialogInfo.value.visible = true
}

function addTaskListener() {
  // 待实现
}

function addGlobalListener() {
  // 待实现
}

function handleElementChanged(event) {
  showConditionSeqFlow?.effect?.scheduler?.()
  showPageConfig?.effect?.scheduler?.()
}

emitter.on('bpmnElementChanged', handleElementChanged)
onUnmounted(() => emitter.off('bpmnElementChanged', handleElementChanged))
</script>

<style scoped>
:deep(.ant-collapse) {
  height: 100%;
  padding: 0 10px;
}

:deep(.ant-collapse-item .ant-collapse-header) {
  font-weight: bold;
  font-size: 1.1em;
}

.event-add-btn {
  cursor: pointer;
}

.event-add-btn:hover {
  color: #1890ff;
}

.collapse-title {
  display: flex;
  align-items: center;
}
</style>
